import CommonDrawer from '@/components/CommonDrawer';
import request from '@/utils/request';
import { useRequest } from 'ahooks';
import { Tabs } from 'antd';
import { useEffect } from 'react';
import Alarms from './Alarms';
import GpsList from './GpsList';
import Stations from './Stations';
import Trip from './Trip';

const Detail = (props) => {
  const { open, record, onCancel } = props;
  const { data, runAsync } = useRequest(
    async (params) => {
      const res = await request({
        url: '/operating/trip/detail',
        method: 'GET',
        params,
      });
      return res;
    },
    { manual: true },
  );
  useEffect(() => {
    if (open && record) {
      runAsync({ tripId: record.tripId });
    }
  }, [open, record]);
  const items = [
    {
      key: '1',
      label: '趟次信息',
      children: <Trip data={data?.trip} />,
    },
    {
      key: '2',
      label: '途径站点',
      children: <Stations data={data?.ioStations} />,
    },
    {
      key: '3',
      label: '轨迹',
      children: <GpsList data={data?.gpslist} />,
    },
    {
      key: '4',
      label: '报警',
      children: <Alarms data={data?.alarms} />,
    },
  ];
  return (
    <CommonDrawer
      title="趟次详情"
      open={open}
      onClose={onCancel}
      width={1200}
      destroyOnHidden
      footer={null}
      styles={{
        body: {
          paddingTop: 0,
        },
      }}
    >
      <Tabs className="fit-tabs" items={items} />
    </CommonDrawer>
  );
};

export default Detail;
